import { Card, Popconfirm, Table, Tooltip } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { useEffect, useState } from 'react';

import onlineUserService from '@/api/services/security/onlineUserService';
import { Iconify } from '@/components/icon';
import TipIconButton from '@/components/icon/tooltip-icon-button';
import OnLineUserSearchForm from '@/pages/monitor/session/search-form';
import { SessionSearchForm } from '@/pages/monitor/session/type';
import { datetime } from '@/utils/format-date';
import { pagination } from '@/utils/pagination';

import { ListData, Session } from '#/entity';
import { OnlineUserAccountType } from '#/enum';
import { onlineUserAccountMapText } from '#/publicVariable';

export default function OnlineUser() {
  const [tableData, setTableData] = useState<ListData<Session>>();
  const [searchForm, setSearchForm] = useState<SessionSearchForm>({
    page: 1,
    take: 10,
  });
  useEffect(() => {
    onlineUserService.getOnlineUsersList(searchForm).then((res) => {
      setTableData(res);
    });
  }, [searchForm]);

  const onDisable = (record: Session) => {
    onlineUserService.disableOnlineUser(record.id).then(() => {
      setSearchForm((prev) => ({
        ...prev,
        page: 1,
      }));
    });
  };
  const columns: ColumnsType<Session> = [
    { fixed: 'left', title: '用户ID', dataIndex: 'userId', key: 'id', width: 60 },
    { title: 'id', dataIndex: 'id', key: 'id', width: 280 },

    {
      title: '密钥',
      dataIndex: 'secret',
      key: 'id',
      width: 150,
      render: (secret: string) => {
        // return `${secret.slice(0, 25)}.....`;
        return (
          <Tooltip title={secret}>
            <div
              style={{
                width: '220px',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
              }}
            >
              {secret}
            </div>
          </Tooltip>
        );
      },
    },
    {
      title: 'IP',
      dataIndex: 'ip',
      key: 'id',
      width: 150,
    },
    {
      title: '失效时间',
      dataIndex: 'expireTime',
      key: 'id',
      width: 150,
    },
    {
      title: '是否禁用',
      dataIndex: 'disabled',
      key: 'id',
      width: 150,
      render: (disabled: boolean) => {
        return disabled ? '是' : '否';
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createAt',
      key: 'id',
      render: (createAt: string) => {
        return datetime(createAt);
      },
    },
    {
      title: '终端',
      dataIndex: 'client',
      key: 'id',
    },
    {
      title: '登录应用',
      dataIndex: 'app',
      key: 'id',
    },
    {
      title: '账户类型',
      dataIndex: 'account',
      key: 'id',
      render: (account) => {
        return onlineUserAccountMapText[OnlineUserAccountType[account]];
      },
    },

    {
      fixed: 'right',
      align: 'center',
      title: '操作',
      render: (record: Session) => {
        return (
          <div
            style={{
              textAlign: 'right',
              display: 'flex',
              color: 'grey',
              justifyContent: 'flex-end',
            }}
          >
            <Popconfirm
              title={`确认让用户ID为  ${record.userId}  的用户下线吗?`}
              okText="确定"
              cancelText="取消"
              onConfirm={() => {
                onDisable(record);
              }}
              placement="left"
            >
              <TipIconButton tipText="下线">
                <Iconify icon="lucide:circle-divide" size={18} className="text-error" />
              </TipIconButton>
            </Popconfirm>
          </div>
        );
      },
    },
  ];
  const onOkSearchForm = (value: any) => {
    setSearchForm((prev) => ({
      ...prev,
      ...value,
    }));
  };
  const onResetSearchForm = () => {
    setSearchForm({ page: 1, take: 10 });
  };

  return (
    <div>
      <OnLineUserSearchForm onOk={onOkSearchForm} onReset={onResetSearchForm} />
      <br />
      <Card title="在线用户">
        <Table
          size="small"
          rowKey="id"
          dataSource={tableData?.data}
          columns={columns}
          scroll={{ x: 'max-content' }}
          pagination={pagination({
            page: searchForm,
            onPageChange: (page, rows) => {
              setSearchForm((prev) => ({
                ...prev,
                page,
                take: rows,
              }));
            },
            count: tableData?.count,
          })}
        />
      </Card>
    </div>
  );
}
